<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <h4>采购单信息</h4>
        <div class="box-body table-responsive no-padding">
            <table class="table">
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>单据状态</th>
                    <th>供应商</th>
                    <th>总金额</th>
                    <th>采购数量</th>
                    <th>下单时间</th>
                    <th>采购人</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{ $purchase->purchase_no }}</td>
                    <td>{{ \App\Models\Purchase\PurchaseOrder::$_status[$purchase->status] }}</td>
                    <td>{{ $purchase->supplier->name ?? '未知' }}</td>
                    <td>{{  round($orderAmount,3) }}</td>
                    <td>{{ $orderNum }}</td>
                    <td>{{ $purchase->order_at }}</td>
                    <td>{{ \App\Util\User::getUsernameById($purchase->pu_user_id) }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <h4>下单信息</h4>
        <div class="box-body table-responsive no-padding">
            <table class="table">
                <thead>
                <tr>
                    <th>结算方式</th>
                    <th>交期</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    @if($purchase->status < 3)
                        <td>
                            <a class="grid-editable-settlement_method_id"
                               href="#"
                               data-type="select"
                               data-pk="{{ $id }}"
                               data-url="{{ '/xqc/purchase/order/'.$id }}"
                               data-value="{{ $purchase->settlement_method_id }}"></a>
                        </td>
                        <td>
                            <a href="javascript:void(0);"
                               class="grid-editable-commit_date"
                               style="padding-top: 5px;display: inline-block;"
                               data-pk="{{ $id }}"
                               data-url="{{ '/xqc/purchase/order/'.$id }}"
                               data-value="{{ $purchase->commit_date }}">
                                @if(empty($purchase->commit_date))
                                    <i class="fa fa-pencil"></i>
                                @else
                                    {{ $purchase->commit_date }}
                                @endif
                            </a>
                        </td>
                    @else
                        <td>{{ $purchase->settlement_method->settlement_method ?? '未知' }}</td>
                        <td>{{ $purchase->commit_date }}</td>
                    @endif
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <h4>备注信息</h4>
        <div class="box-body table-responsive no-padding">
            <table class="table">
                <thead>
                <tr>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <a class="grid-editable-remarks"
                           href="#"
                           data-type="textarea"
                           data-pk="{{ $id }}"
                           data-url="{{ '/xqc/purchase/order/'.$id }}"
                           data-value="{{ $purchase->remarks }}">{{ $purchase->remarks }}</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<template id="editable-input-tpl">
    <div class="control-group form-group">
        <div class="editable-input">
            <input id="pk-__pk__" type="text" class="form-control input-sm" placeholder="选择交期" style="padding-right: 24px;">
        </div>
        <div class="editable-buttons">
            <button id="submit-__pk__" type="button" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button>
            <button id="cancel-__pk__" type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>
        </div>
    </div>
</template>
<template id="editable-a-tpl">
    <a href="javascript:void(0);" class="grid-editable-commit_date"
       style="padding-top: 5px;display: inline-block;"
       data-pk="__pk__" data-url="__url__" data-value="__value__">{!! "__val__" !!}</a>
</template>
<template id="editable-loading-tpl">
    <div class="editableform-loading"></div>
</template>
<script language="JavaScript" type="text/javascript">
    $(function () {
        $(document).on('click', '.grid-editable-commit_date',function(e) {
            var a = $(this);
            var pk = a.data('pk');
            var url = a.data('url');
            var oValue = a.data('value');
            var val = a.text();
            var td = a.parent();
            td.empty();
            td.append($('#editable-input-tpl').html().replace(/__pk__/g, pk));
            var input = $('#pk-'+pk);
            input.val(oValue);
            input.datetimepicker({"format":"YYYY-MM-DD","locale":"zh-CN","allowInputToggle":true});
            var value = oValue;
            var submit = $('#submit-'+pk);
            submit.on('click',function (e) {
                value = input.val().trim();
                val = value == '' ? "<i class=\"fa fa-pencil\"></i>" : value;
                if(oValue != value){
                    $.ajax({
                        method: 'post',
                        url: url,
                        data: {
                            name:'purchase-commit_date',
                            value:value,
                            pk:pk,
                            _method:'PUT',
                            _token:LA.token,
                        },
                        beforeSend: function(XMLHttpRequest) {
                            td.empty();
                            td.append($('#editable-loading-tpl').html());
                        },
                        success: function (data) {
                            td.empty();
                            td.append($('#editable-a-tpl').html().replace(/__pk__/g, pk).replace(/__url__/g, url).replace(/__value__/g, value).replace(/__val__/g, val));
                            // $.pjax.reload("#order-edit-form");
                        }
                    });
                }else {
                    td.empty();
                    td.append($('#editable-a-tpl').html().replace(/__pk__/g, pk).replace(/__url__/g, url).replace(/__value__/g, value).replace(/__val__/g, val));
                }
            });
            var cancel = $('#cancel-'+pk);
            cancel.on('click',function (e) {
                val = oValue == '' ? "<i class=\"fa fa-pencil\"></i>" : oValue ;
                td.empty();
                td.append($('#editable-a-tpl').html().replace(/__pk__/g, pk).replace(/__url__/g, url).replace(/__value__/g, value).replace(/__val__/g, val));
            });
        });
        $('.grid-editable-settlement_method_id').editable({
            "emptytext":"<i class=\"fa fa-pencil\"><\/i>",
            "showbuttons":false,
            "mode":"inline",
            "name":"purchase-settlement_method_id",
            "source":'{!! $settlementMethodOptions !!}'
        });
        $('.grid-editable-remarks').editable(
            {
                "emptytext":"<i class=\"fa fa-pencil\"><\/i>",
                "name":"purchase-remarks"
            });
    });
</script>
